<template>
  <div class="bg">
    <div class="login-box">
      <div class="title">凡尘管理系统</div>
      <div class="ipt">
        <el-input
          prefix-icon="el-icon-user"
          v-model="id"
          placeholder="请输入用户名"
        ></el-input>
      </div>
      <div class="ipt">
        <el-input
          prefix-icon="el-icon-lock"
          v-model="password"
          show-password
          placeholder="请输入密码"
        ></el-input>
      </div>
      <div class="checkbox">
        <el-checkbox v-model="ckId">记住用户名密码</el-checkbox>
        <el-checkbox v-model="automatic">自动登录</el-checkbox>
      </div>
      <el-button type="primary" @click="loginEvt">登录</el-button>
    </div>
  </div>
</template>

<script>
import { MD5, AES, enc } from "crypto-js";
import {
  autoCodeApi,
  autoLoginApi,
  loginApi,
  userInfoApi,
  userMenuApi,
  userRightsApi,
} from "../../apis/userApi";
const KEY = "123123";
export default {
  data() {
    return {
      id: "",
      password: "",
      ckId: "",
      automatic: "",
    };
  },
  created() {
    /** 是否记住用户名和密码 */
    if (!!localStorage.getItem("my-id") && !!localStorage.getItem("my-psw")) {
      this.ckId = true;
      this.id = localStorage.getItem("my-id");
      this.password = AES.decrypt(localStorage.getItem("my-psw"), KEY).toString(
        enc.Utf8
      );
    } else {
      localStorage.removeItem("my-id");
      localStorage.removeItem("my-psw");
    }
    /** 是否自动登录 */
    if (!!localStorage.getItem("my-token")) {
      if (localStorage.getItem("my-token") !== this.$store.getters["common/token"])
      {
        this.$store.commit("common/mutationToken", "");
        this.automatic = false;
        this.$message({
          message: "token出错请重新登录",
          type: "error",
          duration: 1000,
        });
      }
      autoCodeApi().then((d) => {
        this.automatic = true;
        autoLoginApi({ code: d.autocode }).then((_d) => {
          this.$store.commit("common/mutationToken", _d.token);
          this.$router.push("/home");
        });
      });
    }else{
      this.$store.commit("common/mutationMenuList", []);
    }
  },
  methods: {
    async loginEvt() {
      if (this.id === "" || this.password === "") {
        this.$message({
          message: "请输入正确的用户编码或密码",
          type: "error",
          duration: 1000,
        });
        return;
      }
      loginApi({ id: this.id, password: MD5(this.password).toString() })
        .then((d) => {
          /** 存储token */
          this.$store.commit("common/mutationToken", d.token);
          if (!!this.ckId) {
            localStorage.setItem("my-id", this.id);
            localStorage.setItem(
              "my-psw",
              AES.encrypt(this.password, KEY).toString()
            );
          } else {
            localStorage.removeItem("my-id");
            localStorage.removeItem("my-psw");
          }

          !!this.automatic
            ? localStorage.setItem("my-token", d.token)
            : localStorage.removeItem("my-token");
          return Promise.all([
            /** 获取用户信息 */
            userInfoApi({ id: d.userid }),
            /** 获取列表数据 */
            userMenuApi(),
          ]).then((_d) => {
            /** 存储用户数据 */
            this.$store.commit("common/mutationUserInfo", _d[0].data);
            /** 存储列表数据 */
            this.$store.commit("common/mutationMenuList", _d[1].data.rows);
            this.$router.push("/home");
          });
        })
        .catch((e) => {
          this.$message({
            message: "登录失败请重试",
            type: "error",
            duration: 1000,
          });
        });
    },
  },
};
</script>
<style lang="less" scoped>
.bg {
  width: 100%;
  height: 100%;
  background: url("../../../img/bg.jpg") no-repeat center center;
  background-size: cover;
  position: relative;
  .login-box {
    width: 700px;
    height: 400px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20% 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    .title {
      text-align: center;
      font-size: 1.2rem;
      height: 48px;
      line-height: 48px;
      color: #fff;
      margin-bottom: 10px;
      margin-top: 50px;
    }
    .ipt {
      width: 400px;
      padding: 10px 0;
      border-bottom: 1px solid #ccc;
      margin: auto;
    }
    .checkbox {
      width: 400px;
      margin: auto;
      padding: 20px 0;
    }
    .el-button {
      display: block;
      width: 60%;

      margin: 0 auto;
      margin-top: 10px;
    }
  }
}
</style>